<template>
    <div class="handsontable-crud">
        <!-- 操作层 -->
        <div class="operate-layer">
            <SearchComponent />
        </div>

        <!-- 显示层 -->
        <div class="visible-layer">
            <CurdComponent />
            <div id="hot-table-container"></div>
        </div>

        <!-- 分页层 -->
        <div class="pagination-layer">
            <a-pagination v-model:current="props.pagination.current" v-model:page-size="props.pagination.pageSize"
                :total="props.pagination.total" :show-total="() => `共${props.pagination.total}条`" />
        </div>
    </div>


</template>

<script setup lang="ts">
import "handsontable/styles/handsontable.css";
import "handsontable/styles/ht-theme-main.css";
import "handsontable/styles/ht-theme-horizon.css";
import CurdComponent from './components/curd-component/CurdComponent.vue';
import SearchComponent from './components/search-component/SearchComponent.vue';

import { defineProps, computed, onMounted, ref, watch, provide } from 'vue';
import type { PropType } from 'vue';
import type Handsontable from 'handsontable';
import type { IPaginationConfig } from './application/interfaces';
import type { IOperationConfig } from './application/interfaces';
import type { IColumnConfig } from './application/interfaces';
import type { HotElementInitSetting } from './application/interfaces';
import { defaultTableConfig } from './application/constants';
import { defaultPaginationConfig } from './application/constants';
import { defaultOperationConfig } from './application/constants';
import { ProvideHotInstance } from './application/models';





const props = defineProps({
    // 分页配置
    pagination: {
        type: Object as PropType<IPaginationConfig>,
        default: (): IPaginationConfig => (defaultPaginationConfig)
    },
    // 操作配置
    operation: {
        type: Object as PropType<IOperationConfig>,
        default: (): IOperationConfig => (defaultOperationConfig)
    },
    // 表格配置
    tableConfig: {
        type: Object as PropType<Handsontable.GridSettings>,
        default: (): Handsontable.GridSettings => (defaultTableConfig)
    },
    // 列配置
    columns: {
        type: Array as PropType<IColumnConfig[]>
    },
    // 数据
    data: {
        type: Array as PropType<any[]>
    }
})



// 提供 hotInstance
const provideHotInstance = ref<ProvideHotInstance>()
provide('hotTableRef', provideHotInstance);

onMounted(() => {
    const container = document.getElementById('hot-table-container');
    // 初始化配置
    const originSetting: HotElementInitSetting = {
        data: props.data || [],
        columns: props.columns || [],
        operation: props.operation || {},
        tableConfig: props.tableConfig || {},
        pagination: props.pagination || {},
    }
    // 提供实例
    provideHotInstance.value = new ProvideHotInstance(container as HTMLElement, originSetting)

});

</script>

<style scoped lang="less">
// 操作层
.handsontable-crud {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 8px;
    background-color: #fff;
    overflow: auto;
    min-height: 60vh; // 改为视窗高度的50%

    .operate-layer {
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 10px;
        padding: 10px 20px;
    }

    .visible-layer {
        flex: 1;
        min-height: 50%;
        padding: 0 20px;
        padding-top: 10px;
        overflow: auto;
    }

    .pagination-layer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
    }
}

// 按钮
:deep(.action-column) {
    position: sticky !important;
    right: 0;
    background-color: white !important;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* 固定最后一列 */
:deep(.action-column) {
    position: sticky !important;
    right: 0;
    background-color: white !important;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* 固定表头的操作列 */
:deep(.handsontable .htCore th:last-child) {
    position: sticky !important;
    right: 0;
    background-color: white !important;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

:deep(.btn-detail) {
    margin-right: 8px;
    padding: 2px 8px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

:deep(.btn-delete) {
    padding: 2px 8px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

:deep(.btn-detail:hover) {
    background-color: #40a9ff;
}

:deep(.btn-delete:hover) {
    background-color: #ff7875;
}
</style>